<template>
    <div>
        <el-popover
            width="300"
            ref="popover"
            popper-class="add-modal"
            placement="right"
            v-model="visible">
            <div class="add-modal-list" v-loading="loading">
                <el-checkbox-group v-model="checkList">
                    <div v-for="item in groupList" :key="item.id" class="add-modal-list-item">
                        <el-checkbox :name="item.id.toString()" :label="item.id">
                            <div></div>
                        </el-checkbox>
                        <img :src="item.logo" class="add-modal-list-item-img" alt="">
                        <div class="add-modal-list-item-content">
                            <div class="add-modal-list-item-content-title">{{item.name}} {{item.member_count}}人加入</div>
                            <div class="add-modal-list-item-content-info">
                                <div>{{item.member_count}}人加入</div>
                                <div>{{item.fcount}}份报告</div>
                            </div>
                        </div>
                    </div>
                </el-checkbox-group>
            </div>
            <div class="add-modal-page">
                <el-pagination
                    small
                    layout="prev, pager, next"
                    :page-size='7'
                    :total="groupTotal"
                    @current-change="pageChange">
                </el-pagination>
            </div>
            <div class="add-modal-action">
                <el-button type="primary" size="mini" class="add-modal-action-btn" @click="submit">确定</el-button>
            </div>
            <img slot="reference" @click.stop="() => { return }" v-popover:popover class="report-list-item-info-action-item" src="../assets/images/icon-add.png">
        </el-popover>
    </div>
</template>

<script>
import { getMyGroup,addReportToGroup } from "@/api/group.js";
import { mapGetters } from "vuex";
export default {
    data(){
        return{
            visible:false,
            loading:false,
            checkList:[],
            groupTotal:0,
            groupList:[],
            params:{
                sid:"",
                page:1
            }
        }
    },
    props:{
        id:{
            type:[String,Number],
            default:'',
            required:true
        }
    },
    computed:{
        ...mapGetters(['sid'])
    },
    watch:{
        "visible":function(n,o){
            if(n){
                if(this.sid){
                    this.getData();
                }else{
                    this.$store.commit('SET_SHOW',true);
                    this.$nextTick(() => {
                        this.visible = false;
                    })
                }
            }
        }
    },
    created(){
        this.params.sid = this.sid;
    },
    methods:{
        getData(){
            this.loading = true;
            getMyGroup(this.params).then(res => {
                this.groupList = res.infor.group_list;
                this.groupTotal = res.infor.total;
                this.loading = false;
            })
        },
        toString(id){
            return id.toString();
        },
        submit(){
            if(this.checkList.length == 0){
                this.$message.error("请选择群组");
                return false;
            }
            this.visible = false;
            let data = {
                sid:this.sid,
                fid:this.id,
                gids:JSON.stringify(this.checkList)
            }
            addReportToGroup(data).then(res => {
                this.checkList = [];
                this.$message.success("操作成功");
                this.$emit('on-submit');
            })
        },
        pageChange(page){
            this.params.page = page;
            this.getData();
        }
    }
}
</script>

<style lang='less' scoped>
.report-list-item-info-action-item{
    width: 24px;
    height: 24px;
    display: block;
    margin-left: 16px;
}
</style>